<template>
	<view>
		<view class="fenlei">
			<view class="fenlei_left fs14">
				<view :class="index == idx?'select':''" v-for="(item,idx) in list" :key="idx" @click="tab(idx)">
					<text>{{item}}</text>
				</view>
			</view>
			<view class="fenlei_right">
				<view style="padding-top: 30rpx;" v-for="item in 5">
					<image src="../../static/iconsg.png" mode=""></image>
					<view style="transform: scale(0.9);">
						<h5>这是名称名称</h5>
						<view class="fs11" style="color: #999999;padding: 6rpx;position: relative;">
							<text>库存 126</text>
							<image style="width: 10rpx;height: 18rpx;position: absolute;right: 0;"
								src="../../static/iconfh.png" mode=""></image>
						</view>
						<view style="color: #FE401E;"><text class="fs10">￥</text><text class="fs16">18.8</text></view>
						<view class="fs12 btn" style="padding-top: 14rpx;">
							<text type="default">删除</text>
							<text style="margin-left: 30rpx;" type="default">下架</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 88rpx;display: flex;margin-top: 50rpx;border-bottom: 1rpx solid ##FAFAFA;">
			<navigator class="w50 fs13" url="">
				<image src="../../static/icon000Q.png" mode=""></image>
				<view>分类管理</view>
			</navigator>
			<navigator class="w50 fs13" url="./AGEshangpin/AGEshangpin">
				<image src="../../static/icon+.png" mode=""></image>
				<view>添加商品</view>
			</navigator>
		</view>
		<!-- 底部TABBAR -->
		<view class="DBtabbar fs10">
			<navigator @click="TABBAR(0)" class="Tabbar" url="/components/Shangjia/Shangjia">
				<image v-if="idx == 0" src="../../static/icondindan1.png" mode=""></image>
				<image v-else src="../../static/icondindan2.png" mode=""></image>
				<text :class="idx==0?'greens':''">订单</text>
			</navigator>

			<navigator @click="TABBAR(1)" class="Tabbar" url="../ShangPinGuanLi/ShangPinGuanLi">
				<image v-if="idx == 1" src="../../static/icaonsq1.png" mode=""></image>
				<image v-else src="../../static/icongl2.png" mode=""></image>
				<text :class="idx==1?'greens':''">商品管理</text>
			</navigator>
			<navigator @click="TABBAR(2)" class="Tabbar" url="../MyDe/MyDe">
				<image v-if="idx == 2" src="../../static/iconwd1.png" mode=""></image>
				<image v-else src="../../static/iconwd2.png" mode=""></image>
				<text :class="idx==2?'greens':''">我的</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['今日特价', '车厘子', '菩提浆果', '苹果香蕉', '西瓜蜜瓜', '桔橙柑柚'],
				index: 1,
				idx:1
			}
		},
		methods: {
			tab(idx) {
				this.index = idx
			},
			TABBAR(idx) {
				this.idx = idx
			}
		}
	}
</script>

<style>
	.fenlei {
		display: flex;
	}

	.fenlei_left {
		width: 25%;
		height: 950rpx;
		background: #F9F9F9;
	}

	.fenlei_left>view {
		height: 104rpx;
		text-align: center;
		line-height: 104rpx;
	}

	.select {
		color: #22B97D;
		font-weight: 700;
		background: linear-gradient(68deg, #dcffdf 8%, #f6fff3 100%);
	}

	.select>text {
		padding-bottom: 15rpx;
		border-bottom: 8rpx solid #2ED993;
	}

	.fenlei_right {
		width: 75%;
		height: 950rpx;
		overflow: scroll;
	}

	.fenlei_right>view {
		width: 90%;
		height: 220rpx;
		margin: 10rpx auto;
		border-bottom: 1rpx solid #DFDFDF;
		position: relative;
	}

	.fenlei_right>view>image {
		width: 120rpx;
		height: 88rpx;
		padding: 10rpx;
		border: 1rpx solid #28B035;
		position: absolute;
		left: 2%;
		top: 20%;
	}

	.fenlei_right>view>view {
		width: 60%;
		margin-left: 35%;
	}

	.btn>text {
		display: inline-block;
		width: 134rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		color: #A4A4A4;
		border: 1rpx solid #CECECE;
	}
	.w50{
		width: 50%;
		line-height: 88rpx;
		text-align: center;
		position: relative;
	}
	.w50>image{
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: 33rpx;
		left: 100rpx;
	}
</style>
